<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:facelets="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:sec="http://www.springframework.org/security/tags"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push([ '_setAccount', 'UA-25161614-1' ]);
		_gaq.push([ '_trackPageview' ]);

		(function() {
			var ga = document.createElement('script');
			ga.type = 'text/javascript';
			ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl'
					: 'http://www')
					+ '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(ga, s);
		})();
	</script>
	<link rel="stylesheet" href="/Poseidon/css/myStyle.css" type="text/css"
		media="all" />

</h:head>
<h:body>
	<h:form id="form" style="font-size: 0.9em;">
		<p:ajaxStatus onstart="statusDialog.show();"
			onsuccess="statusDialog.hide();" />


		<p:dialog modal="true" widgetVar="statusDialog" draggable="false"
			zindex="5" showHeader="false" styleClass="ui-ajax-dialog"
			closable="false" position="10" resizable="false;" height="120"
			width="70">
			<p:graphicImage style="margin-left:25px;"
				value="/images/ajax-loading-occhi.gif" />
		</p:dialog>

		<p:growl id="growl" />
		<div style="float: left; visibility: hidden;">Bienvenido:
			${request.remoteUser}</div>
		<h:outputLink style="float:right;"
			value="#{request.contextPath}/j_spring_security_logout">  Logout</h:outputLink>

			<p:layout id="layout" style="position:absolute;height:100%;width:100%;">
				<p:layoutUnit position="west" size="210">
						<ui:include src="/pages/menu.xhtml" />
					</p:layoutUnit>
				
				<p:layoutUnit position="center" >
					<div style="margin-left: 200px;">
						<h:graphicImage url="/images/headers/listado_emp.png"
							style="width:80%;margin-bottom:5px" />

						<p:dataTable var="employee" id="table"
							value="#{tableBean.employees}"
							selection="#{tableBean.selectedEmployee}" selectionMode="single"
							style="width:80%;" paginator="false" rows="20"
							onRowEditUpdate="growl" rowEditListener="#{tableBean.saveRow}">
							<p:column headerText="Nombre" sortBy="#{employee.firstname}">

								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{employee.firstname}" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{employee.firstname}" style="width:100%" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Apellido" sortBy="#{employee.lastname}">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{employee.lastname}" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{employee.lastname}" style="width:100%" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column sortBy="#{employee.area}" headerText="Area">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{employee.area}" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{employee.area}" style="width:100%" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Antiguedad(Meses)"
								sortBy="#{employee.monthsOfSeniority}">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{employee.monthsOfSeniority}" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{employee.monthsOfSeniority}"
											style="width:100%" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<sec:authorize ifAllGranted="ROLE_ADMIN">
								<p:column headerText="Opciones">

									<p:rowEditor />
								</p:column>
								<p:column headerText="Borrar">
									<p:commandLink action="#{tableBean.delete}" value=" "
										styleClass="ui-icon ui-icon-trash" update="form growl display"
										ajax="false">
										<f:setPropertyActionListener
											target="#{tableBean.selectedEmployee}" value="#{employee}" />
									</p:commandLink>
								</p:column>
							</sec:authorize>
							<f:facet name="footer">
								<p:commandButton id="details" value="Ver Detalles"
									widgetVar="details" update=":form:dialogPanel"
									oncomplete="employeeDialog.show();" styleClass="font" />
							</f:facet>
						</p:dataTable>
					</div>
				</p:layoutUnit>
			</p:layout>
		<p:dialog header="Detalles de Empleado" modal="true" id="dialog"
			widgetVar="employeeDialog" resizable="false" width="500"
			closeOnEscape="true" showEffect="clip" hideEffect="fold"
			styleClass="font">
			<p:outputPanel id="dialogPanel">
				<h:panelGrid columns="2" id="display" cellspacing="0"
					cellpadding="1">
					<p:graphicImage style="width:60%"
						value="/#{tableBean.selectedEmployee.image}" />
					<h:panelGrid columns="2" cellpadding="4">
						<h:outputText value="Nombre:" />
						<h:outputText value="#{tableBean.selectedEmployee.firstname}" />
						<h:outputText value="Apellido:" />
						<h:outputText value="#{tableBean.selectedEmployee.lastname}" />
						<h:outputText value="Antiguedad" />
						<h:outputText
							value="#{tableBean.selectedEmployee.monthsOfSeniority}" />
						<h:outputText value="Area:" />
						<h:outputText value="#{tableBean.selectedEmployee.area}" />
						<h:outputText value="Grupo:" />
						<h:outputText value="#{tableBean.selectedEmployee.group.name}" />
					</h:panelGrid>
				</h:panelGrid>
			</p:outputPanel>
		</p:dialog>
		<script language="javascript">
			var details = document.getElementById('form:table:details');
			var editEmployee = document
					.getElementById('form:table:editEmployee');
			details.disabled = false;
			editEmployee.disabled = false;
			function updateVisibility() {
				if (editEmployee != null) {
					editEmployee.disabled = false;

				}
				details.disabled = false;
			}
		</script>

	</h:form>
</h:body>
</html>